<!--
 * @Descripttion: 
 * @Author: Wang Dejiang(aei)
 * @Date: 2022-04-24 13:51:47
 * @LastEditors: Wang Dejiang(aei)
 * @LastEditTime: 2022-05-04 09:28:34
-->
<template>
  <el-scrollbar>
    <div class="contentContainer">
      <div class="mdContaniner">
        <v-md-preview :text="text"></v-md-preview>
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { onMounted, ref, watchEffect } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '../../pinia/store'
const apiIndex = storeToRefs(useStore()).apiIndex
const text = ref('')

onMounted(async () => {
  const res = await import('../../assets/md/apis/api_all.md?raw')
  text.value = res.default as string
})

watchEffect(async () => {
  //动态导入md文件，暂时api较少，采用整体加载的形式
  // const res = await import(`../../assets/md/apis/api_${apiIndex.value}.md?raw`)
  //text.value = res.default as string
  console.log('content', apiIndex.value)
})
</script>

<style lang="less">
@import '../../assets/style/md.less';
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
a:link {
  color: var(--text-yellow-color);
  text-decoration: none;
}

a:visited {
  color: var(--text-yellow-color);
  text-decoration: none;
}

a:hover {
  color: var(--text-yellow-color);
  text-decoration: underline;
}
</style>
